<template>

  <Panel style="padding: 20px;margin-bottom: 20px;min-height: 450px;">
    <div style="font-size: 30px; font-weight: 800; color: #2b3c6a  ;">
      购买成功！
    </div>
    <div style="display: flex; flex-direction: column; font-size: 20px;">
      <div >{{order.msg}}</div>
      <div >支付金额: {{order.price}}</div>
      <div v-if="order.invite_code" >订单邀请码: {{order.invite_code}}</div>
      <div v-if="order.coupon_code" >订单优惠券: {{order.coupon_code}}</div>
      <div v-if="order.scholarship > 0" >使用奖学金: {{order.scholarship}}</div>
    </div>
    <el-button round type="success" style="font-size: 20px;" @click="goCourse">去学习课程</el-button>
  </Panel>
</template>


<script>
  import api from '@oj/api'
  import { mapGetters } from 'vuex'
  // import utils from '@/utils/utils'
  import { USER_TYPE } from '@/utils/constants'

  export default {
    name: 'Payfinish',
    data () {
      return {
        order: {
          msg: ''
        }
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        var orderNumber = this.$route.query.out_trade_no
        var md = this.$route.query.method
        console.log('mmmm', md)
        console.log('number...', orderNumber)
        if (md[0] === 'a') {
          api['checkAlipayOrder'](orderNumber).then((res) => {
            if (res.data.data.ok) {
              console.log(res.data.data.order)
              this.order = res.data.data.order
            }
          })
        } else {
          api['checkWxpayOrder'](orderNumber).then((res) => {
            if (res.data.data.ok) {
              this.$message.success('支付成功')
              this.order = res.data.data.order
            }
          })
        }
      },
      goCourse () {
        this.$router.push({name: 'play', query: {course_id: this.order.course, chapter_id: null}})
      }
    },
    computed: {
      ...mapGetters(['user', 'theme']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    }
  }
</script>



<style lang="less" scoped>
 .course_item {
    width: 270px;
    float: left;
    background: #fff;
    margin-bottom: 24px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #d7d7d7;
    position: relative;
    margin-right: 5px;
  }

  .course_image {
    height: 180px;
    width: 100%;
  }

  .course_title {
    font-weight: 600;
    font-size: 20px;
  }
  
  .course_button {
    float: right;
    padding: 8px; 
    background-color:rgb(91, 177, 113);
    color: white;
  }

  
</style>
